<script type="text/x-template" id="mediaitem-mvview-sp">
    <div v-if="(item.attributes?.editorialArtwork?.subscriptionHero?.url ?? item.attributes?.artwork?.url ?? '') !='' " style="position: relative; display: inline-flex;">
        <div @click.self='log(item);app.routeView(item)'
             class="cd-mediaitem-mvview">
            <div style="height: 70px; min-height: 70px; max-height: 70px; width: 100%; margin-left: 5px;">
                <div class="title-browse-sp bold " @click='log(item);app.routeView(item)' style="color: darkgrey;">
                    {{ badge ? badge?.designBadge : ''}}
                </div>
                <div class="title-browse-sp ">
                    {{ (badge != null && badge?.designTag != null) ? badge?.designTag : (item.attributes?.name ?? '') }}
                </div>
                <div class="title-browse-sp semibold" style="color: darkgrey;">
                    {{ (item?.attributes?.artistName ?? (item?.attributes?.curatorName ?? '')) }}
                </div>
            </div>
            <div class="artwork">
                <mediaitem-artwork
                        :url="item.attributes?.editorialArtwork?.subscriptionHero?.url ?? item.attributes?.artwork?.url"
                        :video="(item.attributes != null && item.attributes?.editorialVideo != null) ? (item.attributes?.editorialVideo?.motionDetailSquare ? item.attributes?.editorialVideo?.motionDetailSquare?.video : (item.attributes?.editorialVideo?.motionSquareVideo1x1 ? item?.attributes?.editorialVideo?.motionSquareVideo1x1?.video : '')) : '' "
                        :size="516" :width="900"
                ></mediaitem-artwork>
            </div>
            <div class="cd-mediaitem-mvview-overlay" @click.self='log(item);app.routeView(item)'>
                <div class="button" style="
                    border-radius: 50%;
                    background: rgba(50,50,50,0.7);"
                     :style="[(!(item.attributes?.playParams ? (item.attributes?.playParams?.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes?.playParams ? (item.attributes?.playParams?.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ?
                     {'margin': '205px',
                        'margin-left': '260px', 'margin-bottom': '140px',
                        width: '30px',
                        height: '30px',} :
                        {'margin': '205px',
                        'margin-left': '260px', 'margin-bottom': '140px',
                        width: '30px',
                        height: '30px',}]" @click="app.playMediaItem(item)">
                    <%- include("../svg/play.svg") %>
                </div>
            </div>
        </div>
        <div class="cd-mediaitem-mvview-overlay" @click.self='log(item);app.routeView(item)' tabindex="0">
            <div class="button" style="
                border-radius: 50%;
                background: rgba(50,50,50,0.7);"
                 :style="[(!(item.attributes?.playParams ? (item.attributes?.playParams?.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes?.playParams ? (item.attributes?.playParams?.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ?
                  {'margin': '205px',
                    'margin-left': '260px', 'margin-bottom': '140px',
                    width: '30px',
                    height: '30px',} :
                    {'margin': '205px',
                    'margin-left': '260px', 'margin-bottom': '140px',
                    width: '30px',
                    height: '30px',}]" @click="app.playMediaItem(item)">
                <%- include("../svg/play.svg") %>
            </div>
        </div>
    </div>
</script>

<script>
  Vue.component('mediaitem-mvview-sp', {
    template: '#mediaitem-mvview-sp',
    props: ['item', "imagesize", "badge"],
    data: function() {
      return {
        app: this.$root,
      }
    },
    methods: {
      log(item) {
        console.log(item);
      },
    }
  });
</script>
